<template>
    <view>
        <!-- d:\applet\byteApplet\dy-wallpaper-applet-2\pages\creator\wallpaper\wallpaper.ttml -->

        <view class="cu-list grid col-4 no-border guoshao-view" style="padding: 10px 8px;">
            <view :class="'guoshao-item cu-item ' + (select == 0 ? 'select' : '')" data-index="0" @click.stop.prevent="activeClick">
                <text :class="select == 0 ? 'text' : 'notext'">全部</text>
            </view>
            <view :class="'guoshao-item cu-item ' + (select == 2 ? 'select' : '')" data-index="2" @click.stop.prevent="activeClick">
                <text :class="select == 2 ? 'text' : 'notext'">已通过</text>
            </view>
            <view :class="'guoshao-item cu-item ' + (select == 1 ? 'select' : '')" data-index="1" @click.stop.prevent="activeClick">
                <text :class="select == 1 ? 'text' : 'notext'">审核中</text>
            </view>
            <view :class="'guoshao-item cu-item ' + (select == 3 ? 'select' : '')" data-index="3" @click.stop.prevent="activeClick">
                <text :class="select == 3 ? 'text' : 'notext'">未通过</text>
            </view>
        </view>

        <scroll-view scroll-x class="bg-white nav tab-view" scroll-with-animation :scroll-left="scrollLeft">
            <view
                :class="'cu-item ' + (id == item.id ? 'text-blue cur' : '')"
				v-for="(item,index) in clist"
                :key="index"
                :data-id="item.id"
				:data-current="index"
                @click.stop.prevent="tabSelect"
                :data-classtype="item.classType"
            >
                {{ item.name }}
            </view>

        </scroll-view>

		<scroll-view scroll-x class="bg-white nav tab-view-two" 
		scroll-with-animation :scroll-left="scrollLeftTwo" v-if="twoClassData.length > 0">
			
			<view
			    :class="'cu-item round cu-btn sm guoshao-tab ' + (idTwo == item.id ? ' tab-view-sel' : '')"
				v-for="(item,index) in twoClassData"
			    :key="index"
			    :data-id="item.id"
				:data-current="index"
			    @click.stop.prevent="tabSelectTwo"
			>
			    {{ item.name }}
			</view>
		</scroll-view>
		
        <view class="container">
            <view class="list-box data-v-0034d6f4" :style="twoClassData.length > 0 ? 'margin-top: 160px;' : ''">
                <block v-for="(item,index) in postsLast" :key="index">
                    <block v-if="classType == 1">
						
						<view>
							<view class='cu-tag radius bg-cyan guoshao-tags' v-if="item.topping == 1">
								置顶
							</view>
							<image
								:src="item.thumbnail"
								mode="aspectFill"
								class="image data-v-0034d6f4"
								:index="index"
								:data-id="item.id"
								:data-top="item.topping"
								@click.stop.prevent="handlerDetailClick"
							></image>
							
							<view class="guoshao-view-my" v-if="!isBatchDel">
								<text class="cuIcon-down text-white guoshao-down"></text>
								<text class="guoshao-down-count">{{item.downCount}}</text>
								<text class="cuIcon-timefill text-yellow guoshao-shenhe" v-if="item.status == 1"></text>
								<text class="cuIcon-roundcheckfill text-green guoshao-shenhe" v-if="item.status == 2"></text>
								<text class="cuIcon-roundclosefill text-red guoshao-shenhe" v-if="item.status == 3"></text>
							</view>
							
							<view class="guoshao-view-my" v-if="isBatchDel">
								<text class="cuIcon-roundcheckfill text-green guoshao-shenhe" v-if="batchIds.includes(item.id)"></text>
								<text class="cuIcon-roundcheckfill text-grey guoshao-shenhe" v-if="!batchIds.includes(item.id)"></text>
							</view>
						</view>
						
                    </block>
                    <block v-if="classType == 2">
						<view>
							 <view class='cu-tag radius bg-cyan guoshao-tags' v-if="item.topping == 1">
							 	置顶
							 </view>
							<image
								:src="item.thumbnail"
								mode="aspectFill"
								class="image data-v-0034d6f4"
								:index="index"
								:data-id="item.id"
								:data-top="item.topping"
								@click.stop.prevent="handlerDetailClick"
							></image>
							
							<view class="guoshao-view-my" v-if="!isBatchDel">
								<text class="cuIcon-down text-white guoshao-down"></text>
								<text class="guoshao-down-count">{{item.downCount}}</text>
								<text class="cuIcon-timefill text-yellow guoshao-shenhe" v-if="item.status == 1"></text>
								<text class="cuIcon-roundcheckfill text-green guoshao-shenhe" v-if="item.status == 2"></text>
								<text class="cuIcon-roundclosefill text-red guoshao-shenhe" v-if="item.status == 3"></text>
							</view>
							
							<view class="guoshao-view-my" v-if="isBatchDel">
								<text class="cuIcon-roundcheckfill text-green guoshao-shenhe" v-if="batchIds.includes(item.id)"></text>
								<text class="cuIcon-roundcheckfill text-grey guoshao-shenhe" v-if="!batchIds.includes(item.id)"></text>
							</view>
						</view>
                    </block>
                    <block v-if="classType == 3">
						<view>							
							<view class='cu-tag radius bg-cyan guoshao-tags-3' v-if="item.topping == 1">
								置顶
							</view>
							<image
								:src="item.thumbnail"
								mode="aspectFill"
								class="background-image data-v-0034d6f4"
								:index="index"
								:data-id="item.id"
								:data-top="item.topping"
								@click.stop.prevent="handlerDetailClick"
							></image>
							<view class="guoshao-view-my-3" v-if="!isBatchDel">
								<text class="cuIcon-down text-white guoshao-down-3"></text>
								<text class="guoshao-down-count-3">{{item.downCount}}</text>
								<text class="cuIcon-timefill text-yellow guoshao-shenhe-3" v-if="item.status == 1"></text>
								<text class="cuIcon-roundcheckfill text-green guoshao-shenhe-3" v-if="item.status == 2"></text>
								<text class="cuIcon-roundclosefill text-red guoshao-shenhe-3" v-if="item.status == 3"></text>
							</view>
							
							<view class="guoshao-view-my-3" v-if="isBatchDel">
								<text class="cuIcon-roundcheckfill text-green guoshao-shenhe-3" v-if="batchIds.includes(item.id)"></text>
								<text class="cuIcon-roundcheckfill text-grey guoshao-shenhe-3" v-if="!batchIds.includes(item.id)"></text>
							</view>
						</view>
							
                    </block>
                    <block v-if="classType == 4">
						<view >
							<view class='cu-tag radius bg-cyan guoshao-tags-4' v-if="item.topping == 1">
								置顶
							</view>
							
							<image
								:src="item.thumbnail"
								mode="aspectFill"
								class="emoticon data-v-0034d6f4"
								:index="index"
								:data-id="item.id"
								:data-top="item.topping"
								@click.stop.prevent="handlerDetailClick"
							></image>
							<view class="guoshao-view-my-4" v-if="!isBatchDel">
								<text class="cuIcon-down text-white guoshao-down-4"></text>
								<text class="guoshao-down-count-4">{{item.downCount}}</text>
								<text class="cuIcon-timefill text-yellow guoshao-shenhe-4" v-if="item.status == 1"></text>
								<text class="cuIcon-roundcheckfill text-green guoshao-shenhe-4" v-if="item.status == 2"></text>
								<text class="cuIcon-roundclosefill text-red guoshao-shenhe-4" v-if="item.status == 3"></text>
							</view>
							
							<view class="guoshao-view-my-4" v-if="isBatchDel">
								<text class="cuIcon-roundcheckfill text-green guoshao-shenhe-4" v-if="batchIds.includes(item.id)"></text>
								<text class="cuIcon-roundcheckfill text-grey guoshao-shenhe-4" v-if="!batchIds.includes(item.id)"></text>
							</view>
						</view>
                    </block>
                    <block v-if="classType == 5">
						<view >
							<view class='cu-tag radius bg-cyan guoshao-tags-4' v-if="item.topping == 1">
								置顶
							</view>
							<image
								:src="item.thumbnail"
								mode="aspectFill"
								class="emoticon data-v-0034d6f4"
								:index="index"
								:data-id="item.id"
								:data-top="item.topping"
								@click.stop.prevent="handlerDetailClick"
							></image>
							<view class="guoshao-view-my-4" v-if="!isBatchDel">
								<text class="cuIcon-down text-white guoshao-down-4"></text>
								<text class="guoshao-down-count-4">{{item.downCount}}</text>
								<text class="cuIcon-timefill text-yellow guoshao-shenhe-4" v-if="item.status == 1"></text>
								<text class="cuIcon-roundcheckfill text-green guoshao-shenhe-4" v-if="item.status == 2"></text>
								<text class="cuIcon-roundclosefill text-red guoshao-shenhe-4" v-if="item.status == 3"></text>
							</view>
							
							<view class="guoshao-view-my-4" v-if="isBatchDel">
								<text class="cuIcon-roundcheckfill text-green guoshao-shenhe-4" v-if="batchIds.includes(item.id)"></text>
								<text class="cuIcon-roundcheckfill text-grey guoshao-shenhe-4" v-if="!batchIds.includes(item.id)"></text>
							</view>
						</view>
                    </block>
                </block>
            </view>

           <tui-loadmore :visible="loaddingLast" ></tui-loadmore>
           <tui-nomore :visible="!pullUpOnLast" ></tui-nomore>
			 
        </view>
		<view class="box guoshao-caozuo">
			<view class="cu-bar bg-white tabbar border shop" v-if="!isBatchDel">
				<view class="bg-blue submit btn-upload" @click="uoload">素材上传</view>
				<view class="bg-grey submit btn-manage" @click="manage">管  理</view>
			</view>
			<view class="cu-bar bg-white tabbar  " v-if="isBatchDel">
				<picker @change="bindPickerChange"   range-key="name" selector-type="auto"
				:value="cIndex" :range="twoClassDataSel">
					<view class="" style="width: 125px;text-align: center;margin: 0px auto 10px;" >
						<text class="setClass">设置分类</text>
					</view>
				</picker>
				<view class="bg-red submit " @click="batchDel">
					<text >删  除</text>
				</view>
				<view class="bg-grey submit " @click="cancel">
					<text >取  消</text>
				</view>
			</view>
		</view>
		
		
    </view>
</template>

<script>
import tuiLoading from '../../components/loading/loading';
import tuiLoadmore from '../../components/loadmore/loadmore';
import tuiNomore from '../../components/nomore/nomore';

const http = require('../../utils/http.js');

const Constants = require('../../utils/constants');

export default {
    components: {
        tuiLoading,
        tuiLoadmore,
        tuiNomore
    },
    data() {
        return {
            classType: 0,
            select: 0,
            id: 0,
            scrollLeft: 0,
			scrollLeftTwo:0,
            clist: [],
            pageNum: 1,
            loaddingLast: false,
            postsLast: [],
            pullUpOnLast: true,
			pageRefresh: 0,
			wallpaperId:0,
			toppingVal:0,
			isBatchDel:false,
			isBatchClass:false,
			batchIds:[],
			twoClassData: [{id:0,name:'全部'}],
			twoClassDataSel: [],
			idTwo:0,
			cIndex:0,
		};
    },
    onLoad: function (options) {
    },
	onShow:function(){
		if(this.pageRefresh == 0){
			this.classifiList();
			this.pageRefresh = 1;
		 }
		
	},
    onPullDownRefresh:function() {
		uni.showNavigationBarLoading()
    	let that = this ;
    	setTimeout(function () {
    		that.loadPostLast(true);
			uni.hideNavigationBarLoading(); //完成停止加载图标
    		uni.stopPullDownRefresh();
    	}, 1000);
    },
    onReachBottom: function () {
        if (!this.pullUpOnLast) {
            return;
        }

        this.loadPostLast(false);
    },
    methods: {
		 bindPickerChange: function(e) {
			this.cIndex = e.target.value
			if(this.batchIds.length <= 0){
				uni.showToast({
					title:'请选择要设置的数据',
					icon:'none'
				})
				return;
			}
			
			let obj = this.twoClassDataSel[this.cIndex] ;
			if(obj == null || obj == undefined){
				uni.showToast({
					title:'请选择二级分类',
					icon:'none'
				})
				return;
			}
			this.setClassData();
		},
        activeClick: function (e) {
            let index = e.currentTarget.dataset.index;

            if (this.select == index) {
                return false;
            }

            this.setData({
                select: index
            });
            this.setData({
                pageNum: 1
            });
            this.loadPostLast(true);
        },

        /**
         * 分类
         */
        tabSelect: function (e) {
            let id = e.currentTarget.dataset.id;
            let classType = e.currentTarget.dataset.classtype;

            if (this.id == id) {
                return false;
            }
			this.scrollLeft = (e.currentTarget.dataset.current - 1) * 60;
            this.setData({
                id: id,
                classType: classType ,
				pageNum: 1,
				idTwo:0
            });
			this.batchIds = [];
			this.userClassifiList();
            this.loadPostLast(true);
        },
		/**
		 * 二级分类
		 */
		tabSelectTwo: function (e) {
            let id = e.currentTarget.dataset.id;

            if (this.idTwo == id) {
                return false;
            }
			
			this.scrollLeftTwo = (e.currentTarget.dataset.current - 1) * 60;
            this.setData({
                idTwo: id,
				pageNum: 1
            });
			this.batchIds = [];
            this.loadPostLast(true);
        },

        classifiList: function () {
            let that = this;
            var params = {
                url: '/classification/classifiList',
                method: 'GET',
                data: {},
                callBack: function (res) {
                    that.setData({
                        clist: res.data,
                        classType: res.data.length > 0 ? res.data[0].classType : 0,
                        id: res.data.length > 0 ? res.data[0].id : 0
                    });
					that.userClassifiList();
                    that.loadPostLast(true);
                }
            };
            http.request(params);
        },
		userClassifiList: function () {
		    let that = this;
		    var params = {
		        url: '/u/classify/userClassifiList',
		        method: 'GET',
		        data: {
					parentId: that.id,
					status:1
				},
		        callBack: function (res) {
					that.twoClassData = [];
					that.twoClassDataSel = [];
					if(res.data.length > 0){
						let obj = new Object();
						obj.id = 0;
						obj.name = '全部';
						that.twoClassData.push(obj);
						that.twoClassData  = that.twoClassData.concat(res.data);
						that.twoClassDataSel = res.data;
					}
		        }
		    };
		    http.request(params);
		},

        //加载数据
        loadPostLast: function (refresh) {
            let that = this;
            if (!refresh) {
                let page = ++that.pageNum;
                that.setData({
                    loaddingLast: true,
                    pageNum: page
                });
            } else{
				that.setData({
				    loaddingLast: true,
				    pageNum: 1
				});
			}

            uni.showLoading({
                title: '加载中',
                // 内容
                success: (res) => {},
                fail: (res) => {}
            });
            var params = {
                url: '/u/my/selectMyWallpaper',
                method: 'GET',
                data: {
                    pageNum: that.pageNum,
                    pageSize: Constants.JQ_PER_PAGE_COUNT,
                    order: 4,
                    classId: that.id == 0 ? '' : that.id,
                    status: that.select == 0 ? '' : that.select,
					twoClassId: that.idTwo
                },
                callBack: function (res) {
                    that.setData({
                        loaddingLast: false,
                        postsLast: refresh ? res.data.list : that.postsLast.concat(res.data.list),
                        pullUpOnLast: !res.data.isLastPage ? true : false
                    });
					
					
					
                    uni.hideLoading();
                }
            };
            http.request(params); // 加载分类 end
        },

		contains:function (arrays, obj) {
			var i = arrays.length;
			while (i--) {
				if (arrays[i] === obj) {
					return i;
				}
			}
			return false;
		},

        handlerDetailClick(e) {
			let that = this;

			//批量操作
			if(that.isBatchDel){
				let wallpaperId = e.currentTarget.dataset.id;
				let isExist = false;
				let size = that.batchIds.length;
				if(size > 0){
					if(that.batchIds.includes(wallpaperId)){
						isExist = true;
					}
					
					if(isExist){
						//得到元素下标
						let index = that.contains(that.batchIds,wallpaperId);
						//删除元素
						that.batchIds.splice(index,1);
					}else{
						that.batchIds.push(wallpaperId);
					}
				}else{
					that.batchIds.push(wallpaperId);
				}
			}else{
				this.wallpaperId = e.currentTarget.dataset.id;
				let top = e.currentTarget.dataset.top;
				let title = '置顶'
				if(top == 1){
					title = '取消置顶';
				}
				
				uni.showActionSheet({
				    itemList: [title, '删除'],
				    success: function (res) {
				        if(res.tapIndex  == 0){
							that.setData({
								toppingVal : top
							})
							that.topping();
						}else if(res.tapIndex  == 1){
							that.deleteData();
						}
				    },
				    fail: function (res) {
				    }
				});
			}
			
        },
		deleteData:function(){
			let that = this;
			uni.showModal({
				title: '提示',
				content: '确定删除吗?',
				cancelText: "取消", // 取消按钮的文字  
				confirmText: "删除", // 确认按钮文字  
				showCancel: true, // 是否显示取消按钮，默认为 true
				success: (res) => {
					if(res.confirm) {  
						if(that.isBatchDel){
							that.deleteBatch();
						}else{
							that.deleteImage();
						}
						
					} 
				} 
			})
		},
		
		deleteImage:function(){
			let that = this;
			var params = {
			  url: "/u/my/deleteImage/"+that.wallpaperId,
			  method: "GET",
			  data: {
			  },
			  callBack: function (res) {
			    if(res.code == 200){
					uni.showToast({
						title:'删除成功',
						duration:1000,
						success: (res) => {
							setTimeout(function(){
								uni.pageScrollTo({
						　　　　　　duration: 0,
						　　　　　　scrollTop: 0 
						　　　　})
								that.loadPostLast(true);
							},500)
						} 
					})
				}
			  }
			};
			http.request(params); 
		},
		
		deleteBatch:function(){
			let that = this;
			var params = {
			  url: "/u/my/deleteBatch",
			  method: "POST",
			  data:JSON.stringify(that.batchIds),
			  callBack: function (res) {
			    if(res.code == 200){
					uni.showToast({
						title:'删除成功',
						duration:1000,
						success: (res) => {
							that.batchIds = [];
							setTimeout(function(){
								uni.pageScrollTo({
						　　　　　　duration: 0,
						　　　　　　scrollTop: 0 
						　　　　})
								that.loadPostLast(true);
							},500)
						} 
					})
				}
			  }
			};
			http.request(params); 
		},
		
		topping:function(e){
			let that = this;
			let content = '确定置顶该壁纸吗?'
			
			if(that.toppingVal == 1){
				content = '确定取消置顶该壁纸吗?';
			}
			
			uni.showModal({
				title: '提示',
				content: content,
				cancelText: "取消", // 取消按钮的文字  
				confirmText: "确定", // 确认按钮文字  
				showCancel: true, // 是否显示取消按钮，默认为 true
				success: (res) => {
					if(res.confirm) {  
						that.toppingData();
					} 
				} 
			})
		},
		toppingData:function(){
			let that = this;
			var params = {
			  url: "/u/my/topping/"+that.wallpaperId,
			  method: "GET",
			  data: {
				  topping: that.toppingVal == 1 ? 0 : 1
			  },
			  callBack: function (res) {
			    if(res.code == 200){
					uni.showToast({
						title:'操作成功',
						icon:'none'
					})
					setTimeout(function(){
						uni.pageScrollTo({ 　　　　　　
				　　　　　　duration: 0,
				　　　　　　scrollTop: 0 
				　　　　})
						that.loadPostLast(true);
					},500)
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			  }
			};
			http.request(params); 
		},
		uoload:function(){
			uni.navigateTo({
				url:'/pages/upload/upload'
			})
		},
		//管理
		manage:function(){
			let that = this;
			uni.showActionSheet({
			    itemList: ['管理分类', '批量操作'],
			    success: function (res) {
			        if(res.tapIndex  == 0){
						uni.navigateTo({
							url:'../classify/classify'
						})
					}else if(res.tapIndex  == 1){
						that.isBatchDel = true;
					}
			    },
			    fail: function (res) {
			        console.log(res.errMsg);
			    }
			});
		},
		
		batchDel:function(){
			if(this.batchIds.length == 0){
				uni.showToast({
					title:'请选择删除的数据',
					icon:'none'
				})
				return;
			}
			this.deleteData();
		},
		cancel:function(){
			this.isBatchDel = false;
			this.batchIds = [];
		},
		setClassData:function(){
			let that = this;
			console.log(that.batchIds)
			var params = {
			  url: "/u/my/setClassData/"+that.twoClassDataSel[that.cIndex].id,
			  method: "POST",
			  data: JSON.stringify(that.batchIds),
			  callBack: function (res) {
			    if(res.code == 200){
					uni.showToast({
						title:'设置成功',
						duration:1000,
						success: (res) => {
							that.batchIds = [];
							setTimeout(function(){
								uni.pageScrollTo({
						　　　　　　duration: 0,
						　　　　　　scrollTop: 0 
						　　　　})
								that.loadPostLast(true);
							},500)
						} 
					})
				}else{
					uni.showToast({
						title:res.msg,
						duration:1000,
						success: (res) => {
							
						} 
					})
				}
			  }
			};
			http.request(params); 
		},
    }
};
</script>
<style>
@import './wallpaper.css';
</style>
